<!--考核指标页-->
<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">考核指标</span>
    <el-button type="primary" @click="saveDialogTitle"
               style="float:right;margin-top:10px;">新建指标</el-button>
  </div>
  <!-- 新建考核指标弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="指标名称">
            <el-input placeholder="请输入内容" v-model="saveAssessForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="指标类型">
            <el-input placeholder="请输入内容" v-model="saveAssessForm.type"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="评分标准" >
            <el-input placeholder="请输入内容" v-model="saveAssessForm.standard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权重">
            <el-input placeholder="请输入权重" v-model="saveAssessForm.weight"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input placeholder="请输入内容" v-model="saveAssessForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
                 @click="saveTarget">确定</el-button>
    </template>
  </el-dialog>
  <!--考核指标搜索卡片-->
  <el-card style="margin: 20px;height: 70px">
    <el-form :inline="true">
      <el-form-item label="指标名称" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchAssessForm.name"></el-input>
      </el-form-item>
      <el-form-item label="指标类型" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchAssessForm.type"></el-input>
      </el-form-item>
      <el-form-item label="评分标准" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchAssessForm.standard"></el-input>
      </el-form-item>
      <el-form-item label="权重" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchAssessForm.weight"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadAssess">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 考核指标列表 -->
  <el-card style="margin:20px;">
    <el-table :data="assessTableDate">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="name" label="指标名称"  align="center"/>
      <el-table-column prop="type" label="指标类型"  align="center"/>
      <el-table-column prop="standard" label="评分标准"  align="center"/>
      <el-table-column prop="weight" label="权重"  align="center"/>
      <el-table-column prop="remark" label="备注"  align="center"/>
      <el-table-column prop="remark" label="操作"  align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editTarget(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteAssess(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
// import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import axios from "@/http";


//搜索
const searchAssessForm = ref({
  id:'',
  name:'',
  remark:'',
  standard:'',
  type:'',
  weight:''
});
//保存查询列表
const assessTableDate = ref([]);

const loadAssess = () => {
  let data = qs.stringify(searchAssessForm.value);
  axios.get(BASE_URL+'//oa/assess/target/list?'+data).then((response)=>{
    if(response.data.code === 20000){
      assessTableDate.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

onMounted(()=>{
  loadAssess();
})

const resetSearch = () =>{
  searchAssessForm.value = {};
  loadAssess();
}


const dialogTitle = ref('新建考核指标');
const dialogVisible = ref(false);
const saveDialogTitle = () => {
  dialogVisible.value = true;
}
//新增列表
const saveAssessForm = ref({});

// const saveTarget = () => {
//   let data = qs.stringify(saveAssessForm.value);
//   axios.post(BASE_URL+'/oa/asset/vehicle/save',data).then((response)=>{
//     if(response.data.code == 20000){
//       ElMessage.success("保存成功");
//       loadVehicle();
//       dialogVisible.value = false;
//       saveVehicleForm.value = {};
//     }else {
//       ElMessage.error(response.data.msg)
//     }
//   })
// }

const handleClose = () => {
  if(confirm('确定要关闭此弹窗?')){
    dialogVisible.value = false;
    saveAssessForm.value = {};
    loadAssess();
  }
}

// const editAsssess = (id) => {
//   dialogTitle.value = '管理车辆';
//   dialogVisible.value = true;
//   axios.get(BASE_URL+'/oa/asset/vehicle/select?id='+id).then((response)=>{
//     if(response.data.code === 20000){
//       saveVehicleForm.value = response.data.data[0];
//     }else {
//       ElMessage.error(response.data.msg);
//     }
//   })
// }

const deleteAssess = (ids) => {
  if(confirm('确定要删除此指标吗?')){
    axios.delete(BASE_URL+'/oa/assess/target/'+ids).then((response)=>{
      if(response.data.code == 20000){
        ElMessage.success("删除成功");
        loadAssess();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

</script>

<style scoped>

</style>